"use client"

import { useEffect, useState } from "react"
import dynamic from "next/dynamic"
import { Loader2 } from "lucide-react"

const DynamicCosmograph = dynamic(
  () => import("@cosmograph/react").then((mod) => mod.Cosmograph),
  { ssr: false, loading: () => <LoadingState /> }
)

const LoadingState = () => (
  <div className="flex flex-col items-center justify-center py-8">
    <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
    <p>加载中...</p>
  </div>
)

export function CustomGraphVisualization({ data }: { data: any }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <LoadingState />
  }

  // 克隆并修改数据以确保节点更小
  const adjustedData = {
    ...data,
    cosmographData: {
      ...data.cosmographData,
      nodes: data.cosmographData.nodes.map((node: any) => ({
        ...node,
        size: 2 // 固定为最小值
      })),
      links: data.cosmographData.links.map((link: any) => ({
        ...link,
        value: 0.3 // 固定为最小值
      }))
    }
  };

  return (
    <div className="h-[600px] w-full border rounded-lg overflow-hidden">
      <DynamicCosmograph
        nodes={adjustedData.cosmographData.nodes}
        links={adjustedData.cosmographData.links}
        nodeColor={(node: any) => node.color || "#4285F4"}
        nodeSize={(node: any) => node.size || 3}
        backgroundColor="#1e1e2e" // 暗色背景
        linkColor="#6e6e8a" // 更淡的边颜色，以便在暗色背景上更清晰
        linkWidth={1}
        showHoveredNodeLabel={true}
        nodeLabelAccessor={(node: any) => node.label}
        nodeLabelColor="#ffffff" // 白色标签，在暗色背景上更清晰
      />
    </div>
  )
} 